<template>
    <div class="position-page">
        <div class="content">
            <div class="add-btn text-right">
                <el-button class=" btn" type="danger" @click="creatdDialog=true">新建</el-button>
            </div>
            <div>
                <el-table
                    :data="tableData"
                    stripe
                    v-loading="tableLoading"
                    style="width: 100%">
                    <el-table-column
                        prop="point_name"
                        label="活动位置"
                        width="180"
                        :render-header="ActivityLocation">
                    </el-table-column>
                    <el-table-column
                    prop="point_key"
                    label="活动位置Key"
                    width="180"
                    :render-header="ActivityLocationKey">
                    </el-table-column>
                    <el-table-column
                    prop="desc"
                    label="活动位置描述"
                    :render-header="ActivityLocationInfo">
                    </el-table-column>
                    <el-table-column
                    prop="updated_at"
                    label="创建时间 "
                    >
                    </el-table-column>
                    <el-table-column
                    prop="address"
                    label="操作 ">
                    <template slot-scope="scope">
                        <el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>   
                    </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="paging-num text-center">
                <el-pagination
                small
                layout="prev, pager, next"
                :total="total"
                @current-change="pageChange">
                </el-pagination>
            </div>
        </div> 
        <!--新建-->
        <el-dialog
            title="新建位置"
            :visible.sync="creatdDialog"
            size="tiny"
            >
                <el-input placeholder="请输入内容" v-model="form.point_name" class="dialog-input" :maxlength="10">
                    <template slot="prepend">活动位置:</template>
                </el-input>
                <el-input placeholder="请输入内容" v-model="form.desc" class="dialog-input" :maxlength="20">
                    <template slot="prepend">描述:</template>
                </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="creatdDialog = false">取 消</el-button>
                <el-button type="danger" @click="addPosition()">确 定</el-button>
            </span>
        </el-dialog>  
         <!--编辑-->
        <el-dialog
            title="新建位置"
            :visible.sync="dialogVisible"
            size="tiny"
            >
                <el-input placeholder="请输入内容" v-model="editForm.point_name" class="dialog-input" :maxlength="10">
                    <template slot="prepend">活动位置:</template>
                </el-input>
                <el-input placeholder="请输入内容" v-model="editForm.desc" class="dialog-input" :maxlength="20">
                    <template slot="prepend">描述:</template>
                </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="danger" @click="subEditPosition">确 定</el-button>
            </span>
        </el-dialog>      
    </div>
</template>

<script>
	import * as api from './../api/api';
export default {
    data(){
        return {
            tableLoading:false,
            tableData: [],
            creatdDialog:false,  //新建
            form:{
                point_name:'',
                desc:''
            },
            dialogVisible:false,//编辑
            editForm:{
                point_name:'',
                desc:'',
                id:''
            },
            current_page:0, //当前页码
            last_page:'',//最后一页
            limit:10, //一页显示多少条
            total:1, //总条数
        }
    },
    mounted(){
        this.getPosition();
    },
    computed: {

    },
    methods: {
        //在渲染表头的时候，会调用此方法，h为createElement的缩写版  添加on.change事件即可
        ActivityLocation(h, {column}) {
            return h('span',[
                    h('span', column.label),
                    h('el-tooltip',{
                        attrs:{
                            content:'起个名字，记录APP上您所投放活动的位置',
                            effect:"light",
                            placement:"top-start"
                        }
                    },[
                        h('span',{
                            class:'el-icon-information cursor',
                            style:'margin-left:6px;display:inline-block; color:#999;',
                            
                        })
                    ]),
                    
                ]);
                
        },
        ActivityLocationKey(h, {column}) {
            return h('span',[
                h('span', column.label),
                h('el-tooltip',{
                    attrs:{
                        content:'请将这个告诉您的技术人员',
                        effect:"light",
                        placement:"top-start"
                    }
                },[
                    h('span',{
                        class:'el-icon-information cursor',
                        style:'margin-left:6px;display:inline-block;color:#999;',
                        
                    })
                ]),
                
            ]);
        },
        ActivityLocationInfo(h, {column}) {
            return h('span',[
                h('span', column.label),
                h('el-tooltip',{
                    attrs:{
                        content:'您可用来做备注用',
                        effect:"light",
                        placement:"top-start"
                    }
                },[
                    h('span',{
                        class:'el-icon-information cursor',
                        style:'margin-left:6px;display:inline-block;color:#999;',
                        
                    })
                ]),   
            ]);
        },
        //点击当前的页数
        pageChange(a){
            this.current_page=a;
            this.getPosition();
        },
        //获得获得列表
        getPosition(){
            let vm = this;
            vm.tableLoading=true;
            let body={
                action:'',
                offset:(parseInt(vm.current_page)-1)*parseInt(vm.limit),
                limit:vm.limit,
            };
            api.getPositionList(body).then(res=>{
                vm.total=res.data.total;
                vm.tableLoading=false;
                vm.tableData=res.data.rows;
            })
        },
        //新增
        addPosition(){
            let vm = this;   
            if(vm.form.point_name==''){
                vm.$message({ message: '活动位置不能为空' }); 
            }else if(vm.form.desc==''){
                vm.$message({ message: '描述不能为空' });
            }else{
                api.addPosition(vm.form).then(res=>{
                    if(res.data.code==0){
                        vm.getPosition();
                        vm.creatdDialog = false;
                        vm.$message({type: 'success', message: res.data.message});
                        vm.form={
                            point_name:'',
                            desc:''
                        };
                    }
                })
            }
        },
        //删除
        deleteClick(a){
            let vm = this;
            let body={
                ids:a.id
            };
            this.$alert('确定删除'+a.point_name, '提示', {
                confirmButtonText: '确定',
                callback: action => {
                   api.deletePosition(body).then(res=>{
                       if(res.data.code==0){
                           vm.getPosition();
                           vm.$message({type: 'success', message: res.data.message});
                       }
                   }) 
                }
            });
        },
        //编辑
        editClick(a){
            let vm = this;
            vm.editForm={
                point_name:a.point_name,
                desc:a.desc,
                id:a.id
            },
            vm.dialogVisible=true;
        },
        //确认编辑
        subEditPosition(){
            let vm = this;
            let body={
                id:vm.editForm.id,
                point_name:vm.editForm.point_name,
                desc:vm.editForm.desc
            };
            api.editPosition(body).then(res=>{
                if(res.data.code==0){
                    vm.dialogVisible=false;
                    vm.getPosition();
                    vm.$message({type: 'success', message: res.data.message});
                }
            })
        }

    }
    
}
</script>

<style lang="less" scoped>
.position-page{
    height:100%;
    width:100%;
    background:#fff;
    padding:40px;
    box-sizing:border-box;
    overflow-y:auto;
    .content{
        min-width:1020px;
    }
    .add-btn{
        margin-bottom:20px;
        .btn{
            border-radius:20px;
            padding: 8px 25px;
        }
    }
    .paging-num{
        margin:20px;
        .el-pager li.active{
            border-color: #293E51;
            background-color: #293E51;
        }
    }
    .dialog-input{
        margin-bottom:20px;
    }
}
</style>
